<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
    <link rel="stylesheet" href="${root}css/video/video.css">
</head>
<body>
<div class="video-wrapper">
    <div class="video-content">
        <div class="video-auto">

        </div>
        <div class="video-list">
            <div class="tab-title">
                <a href="#" class="active">课程目录</a>
                <a href="#">课程PPT</a>
            </div>
            <div class="tab-list" >
                <ul class="list-1 show" >
                    <li class="borderColor">时代变革与S2b2c组织</li>
                    <li>单品牌赋能策略-自由自在</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>时代变革与S2b2c组织</li>
                    <li>11111111111111111</li>
                </ul>
                <ul class="list-2">
                    <li><img class="imgLazyLoad" data-src="images/ppt/1.jpg" alt=""> <span>1/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/2.jpg" alt=""> <span>2/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/3.jpg" alt=""> <span>3/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/4.jpg" alt=""> <span>4/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/5.jpg" alt=""> <span>5/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/6.jpg" alt=""> <span>6/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/7.jpg" alt=""> <span>7/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                    <li><img class="imgLazyLoad" data-src="images/ppt/8.jpg" alt=""> <span>8/45</span></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="list-dialog">
        <img  alt="">
    </div>
</div>
<script src="${root}js/jquery.min.js"></script>
<script>
    function init() {
        $('.tab-title a').on('click',function(){
            $(this).addClass('active').siblings().removeClass('active');
            $('.tab-list ul').eq($(this).index()).show().siblings().hide();
        });
        $('.list-1 li').on('click',function () {
            $(this).addClass('borderColor').siblings().removeClass('borderColor');
        });
        $('.list-2 li img').on('click',function () {
            var url = $(this).context.src;
            $('.list-dialog').show().animate({width:"800px",height:"440px"});
            $('.list-dialog img').attr('src',url);
        });
        $('.list-dialog').on('mouseleave',function () {
            $('.list-dialog').hide().animate({width:"0",height:"0"});
        })
    }
    init();
    // 图片懒加载
    var lazyLoad = (function(){
        var clock;

        function init(){
            $('.tab-list').on("scroll", function(){
                if (clock) {
                    clearTimeout(clock);
                }
                clock = setTimeout(function(){
                    checkShow();
                }, 200);
            })
            checkShow();
        }

        function checkShow(){
            $(".list-2 img").each(function(){
                var $cur =$(this);
                if($cur.attr('isLoaded')){
                    return;
                }
                if(shouldShow($cur)){
                    showImg($cur);
                }
            })
        }
        function shouldShow($node){
            var scrollH = $(window).scrollTop(),
                winH = $(window).height(),
                top = $node.offset().top;
            if(top < winH + scrollH){
                return true;
            }else{
                return false;
            }
        }
        function showImg($node){
            $node.attr('src', $node.attr('data-src'));
            $node.attr('isLoaded', true);
        }
        return {
            init: init
        }
    })();
    lazyLoad.init();

</script>
</body>
</html>